<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span v-if="flowType == 1">基层理论宣讲集体</span>
        <span v-else-if="flowType == 2">基层理论宣讲先进个人</span>
        <span v-else-if="flowType == 3">优秀理论宣讲报告</span>
        <span v-else-if="flowType == 4">优秀理论宣讲微视频</span>
      </div>
    </template>

    <div class="search-form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="searchFormRef" @submit.native.prevent="() => onSubmit">
        <el-form-item v-if="flowType == 1 || flowType == 2">
          <el-input v-model="formInline.factualMaterials" placeholder="请输入事迹材料" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item v-if="flowType == 1 || flowType == 2">
          <el-input v-model="formInline.promotionSituation" placeholder="请输入报刊宣传" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item v-if="flowType == 3">
          <el-input v-model="formInline.report" placeholder="请输入宣讲报告（文字）" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item v-if="flowType == 3">
          <el-input v-model="formInline.briefing" placeholder="请输入宣讲情况简介（文字）" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item v-if="flowType == 4">
          <el-input v-model="formInline.briefing" placeholder="请输入视频创作传播相关情况说明" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            <el-icon>
              <Search />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="addAdvanced">新建</el-button>
      </div>
    </div>

    <div class="table-data" v-loading="loading">
      <el-table
        :data="advancedData"
        stripe
        borderresizable
        highlight-hover-row
        show-overflow
        keep-source
        scrollbar-always-on
      >
        <el-table-column
          v-for="(tableItem, tableIndex) in tableColumns" :key="tableIndex"
          :prop="tableItem.field"
          :label="tableItem.label"
          :min-width="tableItem.minWidth"
          :formatter="tableItem.formatter"
          :show-overflow-tooltip="tableItem.field != 'picture' && tableItem.field != 'video'"
        >
          <template #default="scope" v-if="tableItem.slot">
            <slot :name="tableItem.slot" v-bind="scope">
              <el-image class="table-item-img" :src="reFileResult(scope.row.picture)" fit="cover" v-if="tableItem.slot == 'imgView'">
                <template #error>
                  <div class="image-slot">
                    <el-image style="width: 200px;" src="/images/course_default.png" fit="cover" />
                  </div>
                </template>
              </el-image>
              <video
                v-if="tableItem.slot == 'videoView' && scope.row.video != ''"
                ref="videoRef"
                :src="scope.row.video ? reFileResult(scope.row.video) : ''"
                :width="313"
                :height="170"
                muted
                controls
                loop
                showPlay
                controlslist="nodownload"
              ></video>
              <span v-if="tableItem.slot == 'videoView' && scope.row.video == ''"></span>
            </slot>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          field="opera"
          label="操作"
          min-width="120"
        >
          <template #default="{ row }">
            <el-button
              type="warning"
              link
              @click="advancedDetail(row)"
            >查看</el-button>
            <el-button
              type="success"
              link
              @click="advancedEdit(row)"
              v-if="row.checkStatus == 0"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-page">
        <el-pagination background layout="prev, pager, next" :total="dataTotal" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange" />
      </div>
    </div>
  </el-card>
</template>
<script>
export default { name: 'backendPublicizeAdvanced' }
</script>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import approvalDialog from "@/components/backend/approval.vue"
import { http } from '@/utils/http/index';
import { useAuthStore } from '@/stores/modules/auth.js';
import { reFileResult } from "@/utils/backend.js"


/* 路由 */
const router = useRouter();
const route = useRoute()

/* 用户信息 */
const authStore = useAuthStore()

const flowType = computed(() => {
  const current = route.path.replace(/\/backend/g, '')
  // 宣讲集体
  if (current == '/publicize-collectiveness') return 1
  // 先进个人
  if (current == '/publicize-personal') return 2
  // 优秀理论宣讲报告
  if (current == '/publicize-report') return 3
  // 优秀理论宣讲微视频
  if (current == '/publicize-video') return 4
  return ''
})

onMounted(() => {
  onSubmit()
})

/* 搜索表单 */
const searchFormRef = ref(null)

const formInline = ref({
  factualMaterials: "",
  promotionSituation: "",
  report: "",
  briefing: "",
})

/* 分页 */
const dataTotal = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)

if(route.query.currentPage) {
  currentPage.value = Number(route.query.currentPage)
}

/* 切换页码方法 */
const currentChange = (val) => {
  currentPage.value = val
  onSubmit()
}

/* 表格数据加载动画 */
const loading = ref(false)

/* 表格数据 */
const advancedData = ref([])

const checkstatusFormatter = (row, column, cellValue) => {
  return cellValue == '1' || cellValue == '0'  ? '待审批' : cellValue == '2' ? '审批通过' : cellValue == '3' ? '审批未通过' : ''
}

/* 表格字段 */
const tableColumns = computed(() => {
  if (flowType.value == 1 || flowType.value == 2) {
    return [
      { field: "factualMaterials", label: "事迹材料（文字）", minWidth: "200" },
      { field: "promotionSituation", label: "报刊宣传", minWidth: "120" },
      { field: "awards", label: "获奖情况", minWidth: "120" },
      { field: "picture", label: "图片", minWidth: "250", slot: "imgView" },
      { field: "video", label: "视频", minWidth: "250", slot: "videoView" },
      { field: "checkStatus", label: "状态", minWidth: "120", formatter: checkstatusFormatter },
    ]
  } else if (flowType.value == 3) {
    return [
      { field: "report", label: "宣讲报告（文字）", minWidth: "200" },
      { field: "briefing", label: "宣传情况简介（文字）", minWidth: "120" },
      { field: "promotionSituation", label: "报刊宣传", minWidth: "120" },
      { field: "picture", label: "图片", minWidth: "250", slot: "imgView" },
      { field: "checkStatus", label: "状态", minWidth: "120", formatter: checkstatusFormatter },
    ]
  } else {
    return [
      { field: "briefing", label: "视频创作传播相关情况说明", minWidth: "200" },
      { field: "microVideo", label: "微视频", minWidth: "250", slot: "videoView" },
      { field: "picture", label: "报道传播截图", minWidth: "250", slot: "imgView" },
      { field: "checkStatus", label: "状态", minWidth: "120", formatter: checkstatusFormatter },
    ]
  }
})

/* 列表筛选 */
const onSubmit = () => {
  loading.value = true
  let params = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
  }
  let dfi = {
    Logic: 0,
    Filters: [{
      Field: 'fillingType',
      Operator: 8,
      Value: flowType.value
    },{
      Field: "createuserid",
      Operator: 8,
      Value: authStore.userInfo.uid
    }]
  }

  for (let k in formInline.value){
    if(formInline.value[k]){
      dfi.Filters.push({
        Field: k,
        Operator: 0,
        Value: formInline.value[k]
      })
    }
  }

  if(dfi.Filters.length){
    params.dfi = dfi
  }
  http.$POST("/PreachM/GetPreachFillingInfoList", params).then(res => {
    loading.value = false
    if (res.isError) return
    advancedData.value = res.result.dataLst
    dataTotal.value = res.result.countAll
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败，请重试")
  })
}

watch(() => router.currentRoute.value.path, () => {
  formInline.value = {
    factualMaterials: "",
    promotionSituation: "",
    report: "",
    briefing: "",
  }
  currentPage.value = 1
  onSubmit()
})

/* 点击新建 */
const addAdvanced = () => {
  let url;
  
  // 宣讲集体
  if (flowType.value == 1) url = '/backend/publicize-collectiveness/add'
  // 先进个人
  if (flowType.value == 2) url = '/backend/publicize-personal/add'
  // 优秀理论宣讲报告
  if (flowType.value == 3) url = '/backend/publicize-report/add'
  // 优秀理论宣讲微视频
  if (flowType.value == 4) url = '/backend/publicize-video/add'

  router.push({
    path: url,
    query: { type: 'add' }
  })
}

/* 点击编辑 */
const advancedEdit = (row) => {
  let url;
  
  // 宣讲集体
  if (flowType.value == 1) url = '/backend/publicize-collectiveness/add'
  // 先进个人
  if (flowType.value == 2) url = '/backend/publicize-personal/add'
  // 优秀理论宣讲报告
  if (flowType.value == 3) url = '/backend/publicize-report/add'
  // 优秀理论宣讲微视频
  if (flowType.value == 4) url = '/backend/publicize-video/add'

  router.push({
    path: url,
    query: { type: 'edit', id: row.id, currentPage: currentPage.value  }
  })
}

/* 点击查看详情 */
const advancedDetail = (row) => {
  let url;
  
  // 宣讲集体
  if (flowType.value == 1) url = '/backend/publicize-collectiveness/detail'
  // 先进个人
  if (flowType.value == 2) url = '/backend/publicize-personal/detail'
  // 优秀理论宣讲报告
  if (flowType.value == 3) url = '/backend/publicize-report/detail'
  // 优秀理论宣讲微视频
  if (flowType.value == 4) url = '/backend/publicize-video/detail'

  let { href } = router.resolve({
    path: url,
    query: { id: row.id, flowId: row.flowId, currentPage: currentPage.value }
  })
  window.open(href, "_blank")
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>